<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1540345028000_54643" slot-scope="scope">
        <!-- 自定义 -->
        <!-- 通过 v-model="scope.model.blank_1540345028000_54643" 绑定数据 -->
      </template>

    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonData1" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <template slot="table_dialog" slot-scope="scope">
        <generate-form :ref="scope.form" :data="jsonData2" :remote="remoteFuncs" :value="scope.data"/>
      </template>
    </generate-table>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '控制编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345063000_25406' }, 'key': '1540345063000_25406', 'model': 'input_1540345063000_25406', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345064000_34360' }, 'key': '1540345064000_34360', 'model': 'input_1540345064000_34360', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540345041000_11928' }, 'key': '1540345041000_11928', 'model': 'grid_1540345041000_11928', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账户', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345066000_92278' }, 'key': '1540345066000_92278', 'model': 'input_1540345066000_92278', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '控制状态', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': false, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1540345070000_5321' }, 'key': '1540345070000_5321', 'model': 'select_1540345070000_5321', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540345044000_38940' }, 'key': '1540345044000_38940', 'model': 'grid_1540345044000_38940', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': true, 'showIndexCol': false, 'showEdit': true, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonData1: { 'list': [{ 'type': 'input', 'name': '协议编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345635000_32126' }, 'key': '1540345635000_32126', 'model': 'input_1540345635000_32126', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'select', 'name': '控制种类', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'kongzhizhonglei' }, 'key': '1540345659000_16034', 'model': 'select_1540345659000_16034', 'rules': [] }, { 'type': 'select', 'name': '限制类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'xianzhizhonglei' }, 'key': '1540345662000_9555', 'model': 'select_1540345662000_9555', 'rules': [] }, { 'type': 'date', 'name': '终止日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540345677000_29978' }, 'key': '1540345677000_29978', 'model': 'date_1540345677000_29978', 'rules': [] }, { 'type': 'input', 'name': '账户', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345684000_63911' }, 'key': '1540345684000_63911', 'model': 'input_1540345684000_63911', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345691000_78289' }, 'key': '1540345691000_78289', 'model': 'input_1540345691000_78289', 'rules': [] }, { 'type': 'input', 'name': '账户余额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345701000_75082' }, 'key': '1540345701000_75082', 'model': 'input_1540345701000_75082', 'rules': [] }, { 'type': 'input', 'name': '操作', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540345707000_30974' }, 'key': '1540345707000_30974', 'model': 'input_1540345707000_30974', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': true, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonData2: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '操作标志', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'caozuobiaozhi' }, 'key': '1540347074000_80229', 'model': 'select_1540347074000_80229', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '限制类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'xianzhileixing' }, 'key': '1540347076000_2888', 'model': 'select_1540347076000_2888', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540346976000_7524' }, 'key': '1540346976000_7524', 'model': 'grid_1540346976000_7524', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '控制编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347114000_30275' }, 'key': '1540347114000_30275', 'model': 'input_1540347114000_30275', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347116000_54694' }, 'key': '1540347116000_54694', 'model': 'input_1540347116000_54694', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347000000_83829' }, 'key': '1540347000000_83829', 'model': 'grid_1540347000000_83829', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '控制种类', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347119000_61575' }, 'key': '1540347119000_61575', 'model': 'input_1540347119000_61575', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '已控制金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347121000_83685' }, 'key': '1540347121000_83685', 'model': 'input_1540347121000_83685', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347003000_96846' }, 'key': '1540347003000_96846', 'model': 'grid_1540347003000_96846', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347123000_80404' }, 'key': '1540347123000_80404', 'model': 'input_1540347123000_80404', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'date', 'name': '终止日期', 'icon': 'regular/calendar-alt', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'type': 'date', 'format': 'yyyy-MM-dd', 'timestamp': false, 'required': false, 'width': '100%', 'remoteFunc': 'func_1540347239000_16955' }, 'key': '1540347239000_16955', 'model': 'date_1540347239000_16955', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347005000_39412' }, 'key': '1540347005000_39412', 'model': 'grid_1540347005000_39412', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账户余额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347127000_93798' }, 'key': '1540347127000_93798', 'model': 'input_1540347127000_93798', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '控制通知书编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347129000_43663' }, 'key': '1540347129000_43663', 'model': 'input_1540347129000_43663', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347007000_10728' }, 'key': '1540347007000_10728', 'model': 'grid_1540347007000_10728', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '需控制金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347133000_82225' }, 'key': '1540347133000_82225', 'model': 'input_1540347133000_82225', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '控制单位组织机构代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347135000_96987' }, 'key': '1540347135000_96987', 'model': 'input_1540347135000_96987', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347008000_49179' }, 'key': '1540347008000_49179', 'model': 'grid_1540347008000_49179', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '控制证明文件类别', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'kongzhizhengmingwenjianleibie' }, 'key': '1540347079000_12776', 'model': 'select_1540347079000_12776', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '控制单位名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540347138000_30905' }, 'key': '1540347138000_30905', 'model': 'input_1540347138000_30905', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540347010000_69547' }, 'key': '1540347010000_69547', 'model': 'grid_1540347010000_69547', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      editData: {},
      values: {},
      remoteFuncs: {
        kongzhizhonglei(resolve) {
          // 控制种类 select_1540345659000_16034
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('控制种类').then(response => { resolve(response.data) })
        },

        xianzhizhonglei(resolve) {
          // 限制类型 select_1540345662000_9555
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('限制类型').then(response => { resolve(response.data) })
        },
        caozuobiaozhi(resolve) {
          // 操作标志 select_1540347074000_80229
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('操作标志').then(response => { resolve(response.data) })
        },

        xianzhileixing(resolve) {
          // 限制类型 select_1540347076000_2888
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('限制类型').then(response => { resolve(response.data) })
        },

        kongzhizhengmingwenjianleibie(resolve) {
          // 控制证明文件类别 select_1540347079000_12776
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('控制证明文件类别').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
